<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all"/>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">

    var createDialogsForSequenceDiagramMessages = function() {
        var messagePayloadDialogs = {};
        $(".sequence_diagram_clickable").each(function() {
            var sequenceDiagramMessage = $(this);
            var myScenario = sequenceDiagramMessage.parents(".scenario");
            var scenarioUid = myScenario.attr("id");
            var sequenceDiagramMessageId = sequenceDiagramMessage.attr("sequence_diagram_message_id");

            var dialogContent = myScenario.find('H3[logKey="' + sequenceDiagramMessageId + '"]').next("div").clone();

            var capturedInputAndOutputsName = sequenceDiagramMessage.text();
            sequenceDiagramMessageId = "" + sequenceDiagramMessageId + "_" + scenarioUid;
            messagePayloadDialogs[sequenceDiagramMessageId] = dialogContent.dialog({title:capturedInputAndOutputsName,minWidth: 800,stack:false,closeOnEscape:true, autoOpen:false });
        });
        return messagePayloadDialogs;
    };

    var dialogsCreated = false;
    var messagePayloadDialogs = {};
    $(document).ready(function () {

        $(".SvgWrapper").toggleClass("hide");

        $(".sequence_diagram_clickable").click(function() {
            openDialog($(this), "click");
        });

        $(".sequence_diagram_clickable").hover(function() {
            openDialog($(this), "hover");
        }, function(){
            closeHoveredDialog($(this));
        })
    });

    function dialogForSequenceDiagramMessage(sequenceDiagramMessage) {
        var myScenario = sequenceDiagramMessage.parents(".scenario");
        var scenarioUid = myScenario.attr("id");
        var sequenceDiagramMessageId = "" + sequenceDiagramMessage.attr("sequence_diagram_message_id") + "_" + scenarioUid;
        return messagePayloadDialogs[sequenceDiagramMessageId];
    }

    function closeHoveredDialog(sequenceDiagramMessage) {
        var dialog = dialogForSequenceDiagramMessage(sequenceDiagramMessage);
        if(dialog.openMethod == "hover" ) {
            dialog.dialog("close")
        }
    }

    function openDialog(sequenceDiagramMessage, openMethod) {
        if (!dialogsCreated) {
            messagePayloadDialogs = createDialogsForSequenceDiagramMessages();
            dialogsCreated = true;
        }

        var dialog = dialogForSequenceDiagramMessage(sequenceDiagramMessage);
        dialog.openMethod=openMethod;
        dialog.dialog("open");
    }

</script>
